import React, { useEffect, useState, useRef } from 'react';
import style from './index.module.css';
import { LinkedList } from './linkList';

const ScrollTable = (props) => {

    const addEvent = () => {
        globalThis.addEventListener('Model Change', (e: any) => {
            let ul = document.getElementById('list');
            let first5 = e?.detail?.data();
            while (ul.firstChild) {
                ul.removeChild(ul.firstChild);
            }
            for (let ele = first5.next(); ele.value !== undefined; ele = first5.next()) {
                let listNode = document.createElement('li');
                let text = document.createTextNode(ele.value);
                listNode.appendChild(text);
                ul.appendChild(listNode);
            }

        })
    }

    const initData = () => {
        let model = LinkedList();
        let head = model.add('a');
        model.add('b');
        model.add('c');
        model.add('d');
        let tail = model.add('e');

        tail.next = head;

        (function animate(model) {
            let e = new CustomEvent("Model Change", {
                detail: {
                    data: () => {
                        return model.first(5);
                    }
                }
            });
            globalThis.dispatchEvent(e);
            setTimeout(() => {
                model.movehead();
                animate(model);
            }, 1200);
        })(model)
    }

    useEffect(() => {
        addEvent();
        initData();
    }, [])
    return (
        <div className={style.flex} id="list">
            123
        </div>
    )
}

export default ScrollTable;
